<!--
 * @Author: byron
 * @Date: 2021-12-08 12:01:54
 * @LastEditTime: 2022-02-18 17:14:23
-->
<template>
    <div>
        <page-header title="分类列表">
            <a-button
                type="primary"
                :size="size"
                style="margin-right: 5px"
                @click="showAddModal"
                >新增分类</a-button
            >
        </page-header>
        <page-layout>
            <a-table :columns="columns" :data-source="cateData">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'avatar'">
                        <a-avatar
                            shape="square"
                            :size="64"
                            :src="record.avatar"
                        >
                        </a-avatar>
                    </template>
                    <template v-if="column.key === 'status'">
                        <a-switch
                            v-model:checked="record.status"
                            @click="updateStatus(record)"
                            checked-children="启用"
                            un-checked-children="禁用"
                        />
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <span>
                            <a-button
                                type="primary"
                                :size="size"
                                style="margin-right: 5px"
                                @click="showDrawer(record)"
                                >编辑</a-button
                            >
                            <a-popconfirm
                                title="确认删除此分类？"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="detCateBtn(record.id)"
                                @cancel="cancel"
                            >
                                <a-button danger :size="size">删除</a-button>
                            </a-popconfirm>
                        </span>
                    </template>
                </template>
            </a-table>
            <a-modal
                v-model:visible="addVisible"
                title="新增分类"
                @ok="addCateBtn"
            >
                <a-form
                    ref="formRef"
                    :model="addForm"
                    :rules="addRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-item
                        ref="name"
                        label="分类名称"
                        name="categoryName"
                    >
                        <a-input v-model:value="addForm.categoryName" />
                    </a-form-item>
                    <a-form-item label="图片URL" name="avatar">
                        <a-input v-model:value="addForm.avatar" />
                    </a-form-item>
                    <a-form-item label="描述" name="description">
                        <a-input v-model:value="addForm.description" />
                    </a-form-item>
                </a-form>
            </a-modal>

            <!-- 编辑分类 -->
            <a-drawer
                v-model:visible="editVisible"
                class="custom-class"
                style="color: red"
                title="编辑标签"
                :width="720"
                placement="right"
            >
                <a-form
                    ref="formRef"
                    :model="addForm"
                    :rules="addRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-item ref="name" label="当前id">
                        <a-input v-model:value="addForm.id" :disabled="true" />
                    </a-form-item>
                    <a-form-item label="分类名称" name="tagName">
                        <a-input v-model:value="addForm.categoryName" />
                    </a-form-item>
                    <a-form-item label="描述" name="description">
                        <a-input v-model:value="addForm.description" />
                    </a-form-item>
                    <a-form-item label="图片URL" name="avatar">
                        <a-input v-model:value="addForm.avatar" />
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button
                            type="primary"
                            @click="editBtn"
                            @keyup.enter="editBtn"
                            >确定</a-button
                        >
                        <a-button style="margin-left: 10px" @click="resetForm"
                            >重置</a-button
                        >
                    </a-form-item>
                </a-form>
            </a-drawer></page-layout
        >
    </div>
</template>
<script>
import {
    getCategory,
    delCategory,
    addCategory,
    updateCateStatus,
    editCategory,
} from '@/api/index.js'
import { message } from 'ant-design-vue'
import { ref, reactive, toRaw } from 'vue'
const columns = [
    {
        title: '分类Id',
        width: 100,
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '分类名称',
        dataIndex: 'categoryName',
        key: 'categoryName',
    },
    {
        title: '图片',
        dataIndex: 'avatar',
        key: 'avatar',
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
    },
    {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
    },
    {
        title: '操作',
        width: 200,
        key: 'action',
    },
]

const size = 'middle'
export default {
    components: {},

    setup() {
        const changeStatus = ref(true)
        const cateData = ref([])
        const getData = async () => {
            const { data: res } = await getCategory()
            cateData.value = res.data.map((e) => {
                if (e.status == 1) {
                    e.status = true
                } else {
                    e.status = false
                }
                return e
            })
        }
        getData()

        const detCateBtn = async (id) => {
            const { data: res } = await delCategory(id)
            if (res.code == 200) {
                message.success('删除成功')
                getData()
                return
            }
            message.error(res.msg)
        }

        /**
         * 新增分类
         */
        const formRef = ref()
        const addForm = reactive({
            categoryName: '',
            avatar: null,
            description: '',
        })
        const addRules = {
            categoryName: [
                {
                    required: true,
                    message: '分类名称',
                    trigger: 'blur',
                },
                {
                    min: 2,
                    max: 6,
                    message: '长度在2到6',
                    trigger: 'blur',
                },
            ],
            avatar: [
                {
                    required: true,
                    message: '分类图片URL',
                    trigger: 'blur',
                },
            ],
            description: [
                {
                    required: true,
                    message: '分类相关描述',
                    trigger: 'blur',
                },
            ],
        }
        const addVisible = ref(false)
        const showAddModal = () => {
            addVisible.value = true
        }
        const addCateBtn = () => {
            formRef.value
                .validate()
                .then(async () => {
                    const { data: res } = await addCategory(toRaw(addForm))
                    if (res.code == 200) {
                        message.success('添加分类成功')
                        addVisible.value = false
                        getData()
                        return
                    }
                    message.error(res.msg)
                })
                .catch((error) => {
                    console.log('error', error)
                })
        }
        const cancel = () => {}

        /**
        编辑标签
         */
        const editVisible = ref(false)
        const showDrawer = (record) => {
            editVisible.value = true
            addForm.id = record.id
            addForm.categoryName = record.categoryName
            addForm.description = record.description
            addForm.avatar = record.avatar
        }
        const editBtn = () => {
            formRef.value.validate().then(async () => {
                const { data: res } = await editCategory(toRaw(addForm))
                const { msg, code } = res
                if (code == 200) {
                    message.success('更新分类成功')
                    getData()
                    editVisible.value = false
                    return
                }
                message.error(msg)
                editVisible.value = false
            })
        }

        /**
         * 更改状态
         */
        const updateStatus = async (record) => {
            const form = {
                id: record.id,
                status: record.status ? 1 : 0,
            }
            console.log('@@@@', form)
            const { data: res } = await updateCateStatus(form)
            const { code, msg } = res
            if (code == 200) {
                message.success('更新状态成功')
                return
            }
            message.error(msg)
        }
        return {
            changeStatus,
            labelCol: {
                span: 4,
            },
            wrapperCol: {
                span: 14,
            },
            addForm,
            showDrawer,
            editBtn,
            addRules,
            formRef,
            columns,
            size,
            cateData,
            detCateBtn,
            showAddModal,
            editVisible,
            addVisible,
            cancel,
            addCateBtn,
            updateStatus,
        }
    },
}
</script>
